<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<form >
				
				喜好：
				<input type="checkbox" name="likes" v-model="likes" value="l" />
				<input type="checkbox" name="likes" v-model="likes" value="2" />
				<input type="checkbox" name="likes" v-model="likes" value="3" />
				
				性别：
				<input type="radio" v-model="sex" value="男" />
				<input type="radio" v-model="sex" value="女" />
				
				国籍
				<select v-model="countyid">
					<option v-for="item in counties" :value="item.key">{{item.value}}</option>
				</select>
			</form>
			<div>{{likes}}</div>
			<div>{{sex}}</div>
			<div>{{countyid}}</div>
		</div>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					likes: [],
					sex: '',
					counties: [
						{key: 1, value: '中国'},
						{key: 2, value: '美国'},
						{key: 3, value: '英国'},
						{key: 4, value: '德国'},
					],
					countyid: '4'
				}
			})
			
			
		</script>
	</body>
</html>
